import React from "react";
import classnames from "classnames";
import { Select, Input, Table, Modal, Form, Button, Checkbox, Row, Col } from "antd";
import apiHelper from "@/utils/resource";
import "./style.scss";

const Option = Select.Option;

class UserManger extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            addUserModal: false,
            addRoleModal: false,
            tabList: [{ name: "用户管理", active: true }, { name: "角色管理", active: false }],
            tabType: "用户管理",
            tableColumns: [
                {
                    title: "序号",
                    dataIndex: "order",
                    key: "order"
                },
                {
                    title: "角色",
                    dataIndex: "role",
                    key: "role"
                },
                {
                    title: "用户名",
                    dataIndex: "userName",
                    key: "userName"
                },
                {
                    title: "姓名",
                    dataIndex: "name",
                    key: "name"
                },
                {
                    title: "邮箱",
                    dataIndex: "email",
                    key: "email"
                },
                {
                    title: "电话",
                    dataIndex: "phone",
                    key: "phone"
                },
                {
                    title: "最后登录日期",
                    dataIndex: "lastDate",
                    key: "lastDate"
                },
                {
                    title: "操作",
                    key: "op",
                    render: item => {
                        const op = item.op;
                        return (
                            <span>
                                <span className="op op-edit" onClick={() => this.addAdmin()}>
                                    编辑
                                </span>
                                <span className="op op-unuse" onClick={() => this.handleDisable(item.order)}>
                                    {op[1]}
                                </span>
                                <span className="op op-cancel" onClick={() => this.cancellationUser()}>
                                    注销
                                </span>
                            </span>
                        );
                    }
                }
            ],
            tableData: [
                {
                    key: "1",
                    order: "1",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "2",
                    order: "2",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "3",
                    order: "3",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "4",
                    order: "4",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "5",
                    order: "5",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "6",
                    order: "6",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "7",
                    order: "7",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "8",
                    order: "8",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "9",
                    order: "9",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "10",
                    order: "10",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                },
                {
                    key: "11",
                    order: "11",
                    role: "管理员",
                    userName: "Admin",
                    name: "张三",
                    email: "7158XXXXX.qq.com",
                    phone: "15928797311",
                    lastDate: "15928797311",
                    op: ["编辑", "停用", "注销"]
                }
            ]
        };
    }

    componentDidMount() {
        apiHelper.get("/manifest.json").then(res => console.log(res));
    }

    // tab页切换
    switchTab = name => {
        const { tabList } = this.state;
        const tabListCopy = tabList.map(item => {
            return {
                name: item.name,
                active: item.name === name
            };
        });

        this.setState({
            tabList: tabListCopy,
            tabType: name
        });
    };

    // 新增管理员/新增角色  对话框打开
    addAdmin = type => {
        if (type === "user") {
            this.setState({
                addUserModal: true
            });
        } else if (type === "role") {
            this.setState({
                addRoleModal: true
            });
        }
    };

    // 新增管理员/新增角色 确认
    handleOk = type => {
        if (type === "user") {
            this.setState({
                addUserModal: false
            });
        } else if (type === "role") {
            this.setState({
                addRoleModal: false
            });
        }
    };

    // 新增管理员/新增角色 取消
    handleCancel = type => {
        if (type === "user") {
            this.setState({
                addUserModal: false
            });
        } else if (type === "role") {
            this.setState({
                addRoleModal: false
            });
        }
    };

    // 停用、启用
    handleDisable = index => {
        const { tableData } = this.state;
        const disableName = tableData[index - 1].op[1];

        if (disableName === "停用") {
            tableData[index - 1].op[1] = "启用";
        } else {
            tableData[index - 1].op[1] = "停用";
        }

        this.setState({
            tableData: tableData
        });
    };

    // 注销用户 对话框
    cancellationUser = () => {
        Modal.confirm({
            title: "注销用户",
            content: "注销后用户信息不可恢复，是否确认注销？",
            onOk() {},
            onCancel() {}
        });
    };

    render() {
        const { addUserModal, addRoleModal, tabList, tabType, tableData, tableColumns } = this.state;
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="user-manger">
                <div className="user-manger-title">
                    <ul className="clearfix">
                        {tabList.map(item => {
                            const tabClass = classnames({
                                active: item.active
                            });
                            return (
                                <li key={item.name} className={tabClass} onClick={() => this.switchTab(item.name)}>
                                    {item.name}
                                </li>
                            );
                        })}
                    </ul>
                </div>

                <div className="user-manger-search dayu-select clearfix">
                    {tabType === "用户管理" && [
                        <div key={1} className="add-role" onClick={() => this.addAdmin("user")}>
                            <i className="iconfont">&#xeaf3;</i>
                            <span>新增管理员</span>
                        </div>,
                        <Input key={2} className="role-search" placeholder="请输入姓名/邮箱/电话" />,
                        <Select key={3} dropdownClassName="dayu-select" className="choose-role" placeholder="选择角色">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                        </Select>
                    ]}
                    {tabType === "角色管理" && [
                        <div key={1} className="fl tip">
                            提示：停用角色后，所属用户将全部停用
                        </div>,
                        <div key={2} className="add-role" onClick={() => this.addAdmin("role")}>
                            <i className="iconfont">&#xeaf3;</i>
                            <span>新增角色</span>
                        </div>,
                        <Input key={3} className="role-search" placeholder="请输入角色名" />
                    ]}
                </div>

                <div className="user-manger-table table-pagination">
                    <Table columns={tableColumns} dataSource={tableData} />
                </div>

                {/* 新增管理员对话框 */}
                <Modal
                    className="dayu-dialog"
                    title="新增管理员"
                    cancelText="取消"
                    okText="确认"
                    visible={addUserModal}
                    onOk={() => this.handleOk("user")}
                    onCancel={() => this.handleOk("user")}
                >
                    <Form>
                        <Form.Item label="用户名">
                            {getFieldDecorator("admin", {
                                initialValue: "管理员",
                                rules: [{ required: true, message: "Please input your note!" }]
                            })(
                                <Select className="choose-role" placeholder="选择角色">
                                    <Option value="1">管理员</Option>
                                    <Option value="2">一般</Option>
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label="用户角色">
                            {getFieldDecorator("role", {
                                rules: [{ required: true, message: "Please input your note!" }]
                            })(<Input placeholder="请输入用户名/2-20位/支持英文、数字、下划线" />)}
                        </Form.Item>
                        <Form.Item label="姓名（选填）">
                            {getFieldDecorator("name", {
                                rules: [{ required: false, message: "Please input your note!" }]
                            })(<Input placeholder="请输入用户名" />)}
                        </Form.Item>
                        <Form.Item label="邮箱（选填）">
                            {getFieldDecorator("email", {
                                rules: [{ required: false, message: "Please input your note!" }]
                            })(<Input placeholder="请输入邮箱名称" />)}
                        </Form.Item>
                        <Form.Item label="电话（选填）">
                            {getFieldDecorator("email", {
                                rules: [{ required: false, message: "Please input your note!" }]
                            })(<Input placeholder="请输入11位电话号码" />)}
                        </Form.Item>
                        <Form.Item label="密码">
                            {getFieldDecorator("psd", {
                                rules: [{ required: false, message: "Please input your note!" }]
                            })(
                                <div>
                                    <Input className="wid-percent65 fl" placeholder="请输入11位电话号码" />
                                    <Button className="ml-25 fr">生成随机密码</Button>
                                </div>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>

                {/* 注销 */}
                <Modal
                    className="dayu-dialog"
                    title="新增角色"
                    cancelText="取消"
                    okText="确认"
                    visible={addRoleModal}
                    onOk={() => this.handleOk("role")}
                    onCancel={() => this.handleCancel("role")}
                >
                    <Form>
                        <Form.Item label="角色名">
                            {getFieldDecorator("role", {
                                rules: [{ required: true, message: "请输入角色名称" }]
                            })(<Input placeholder="请输入角色名/支持中英文及数字" />)}
                        </Form.Item>
                        <Form.Item label="角色权限">
                            {getFieldDecorator("permissions", {
                                rules: [{ required: true, message: "至少选择一个权限" }]
                            })(
                                <Checkbox.Group style={{ width: "100%" }}>
                                    <Row>
                                        <Col span={8}>
                                            <Checkbox value="0">首页</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="1">挖掘查询</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="2">研判分析</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="3">管控预警</Checkbox>
                                        </Col>
                                        <Col span={12}>
                                            <Checkbox value="4">个人中心-用户管理</Checkbox>
                                        </Col>
                                    </Row>
                                </Checkbox.Group>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Form.create()(UserManger);
